<!-- 正文开始 -->
<div class="site-banner">
    <div class="layui-carousel" id="banner">
        <div carousel-item="">
            <div><img src="http://img.laopifu.top/2021/09/a080542021091411453182445.png"></div>
            <div><img src="http://img.laopifu.top/2021/09/5e46712021091411454245310.png"></div>
            <div><img src="http://img.laopifu.top/2021/09/e890262021091411471640984.png"></div>
        </div>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-container" style="padding-top: 20px">
        <div class="layui-row layui-col-space30" id="contentList"></div>
    </div>
</div>

<script type="text/html" id="contentItem">
    <div class="article-list-item">
        <h2>{{d.title}}</h2>
        <span class="layui-badge-rim">{{d.LAY_NUMBER}}楼</span>
        <div class="layui-badge-list">
            <span class="layui-badge layui-badge-gray">{{d.cate_name}}</span>
        </div>
        <div class="article-list-item-text layui-text">
            {{d.remark}}
        </div>
        <div class="article-list-item-desc layui-text">
            {{d.create_time}}
        </div>
        <div class="article-list-item-tool">
            <span class="article-list-item-tool-item {{d.isStar?'star-active':''}}" lay-event="star">
                <i class="layui-icon layui-icon-rate"></i>&nbsp;
                <span>{{d.star}}</span>
            </span>
            <span class="article-list-item-tool-item {{d.isLike?'star-active':''}}" lay-event="like">
                <i class="layui-icon layui-icon-praise"></i>&nbsp;
                <span>{{d.like}}</span>
            </span>
            <span class="article-list-item-tool-item" lay-event="comment">
                <i class="layui-icon layui-icon-read"></i>&nbsp;
                <span>{{d.comment}}</span>
            </span>
        </div>
    </div>
</script>
<!-- js部分 -->
<script>
    layui.use(['setter', 'util', 'carousel','dataGrid','admin'], function () {
        var $ = layui.jquery;
        var setter = layui.setter;
        var admin = layui.admin;
        var carousel = layui.carousel;
        var dataGrid = layui.dataGrid;
        //图片轮播
        carousel.render({
            elem: '#banner'
            , width: '100%'
            , height: 'inherit'
            , interval: 5000
        });
        // 项目
        admin.req(setter.baseServer + '/index/get_content_list', function (res) {
            dataGrid.render({
                elem: '#contentList',
                templet: '#contentItem',
                data: res.data,
                page: {limit: 8, limits: [8, 16, 24, 32, 40]}
            });
        });

        dataGrid.on('item(contentList)', function (obj) {
            layer.msg('点击了第' + (obj.index + 1) + '个');
        });


    });
</script>
<style>
    .layui-carousel img{
        width: 100%;
        object-fit: cover;
        height: inherit;
    }
    /** 文章列表样式 */
    .article-list-item {
        border-bottom: 1px solid #e8e8e8;
        margin-top: 16px;
        position: relative;
    }

    .article-list-item > h2 {
        font-size: 18px;
        color: #333;
        margin-bottom: 12px;
    }

    .article-list-item > .layui-badge-rim {
        position: absolute;
        right: 0;
        top: 0;
    }

    .article-list-item .layui-badge-list .layui-badge {
        padding-top: 0;
        padding-bottom: 0;
    }

    .article-list-item .article-list-item-text {
        margin-bottom: 12px;
    }

    .article-list-item .article-list-item-desc {
        margin-bottom: 12px;
    }

    .article-list-item .article-list-item-desc .head {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }

    .article-list-item .article-list-item-desc > * {
        vertical-align: middle;
    }

    .article-list-item .article-list-item-tool {
        color: #666;
        margin-bottom: 5px;
    }

    .article-list-item .article-list-item-tool .article-list-item-tool-item {
        border-right: 1px solid #e8e8e8;
        padding: 0 15px;
        cursor: pointer;
    }

    .article-list-item .article-list-item-tool .article-list-item-tool-item:first-child {
        padding-left: 0;
    }

    .article-list-item .article-list-item-tool .article-list-item-tool-item:last-child {
        border-right: none;
        padding-right: 0;
    }

    .article-list-item .article-list-item-tool .article-list-item-tool-item > * {
        vertical-align: middle;
    }

    .article-list-item .article-list-item-tool .article-list-item-tool-item.star-active {
        color: #01AAED;
    }

    .article-list-item .article-list-item-tool .article-list-item-tool-item.star-active .layui-icon-rate:before {
        content: "\e67a";
    }

    /** // 文章列表样式结束 */
</style>
